<template>
    <div>
  
      <el-form ref="editForm" :model="formFileds">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item>
              <el-input v-model="formFileds.text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" @click="add">增加
              </el-button>
            </el-form-item>
          </el-col>
  
        </el-row>
      </el-form>
  
      <!--表格内容-->
      <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
        :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="userID" label="用户名">
        </el-table-column>
        <el-table-column property="userName" label="姓名">
        </el-table-column>
        <el-table-column property="role" label="角色">
        </el-table-column>
        <el-table-column property="mailbox" label="邮箱">
        </el-table-column>
        <el-table-column property="tel" label="电话">
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button circle icon="el-icon-key" type="success" title="重置密码" size="small"
              @click="passwordChange();"></el-button>
            <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
              @click="rowEdit(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!--分页-->
      <el-pagination :page-sizes="[10, 20, 30, 40,100]" :page-size="10" :total="100"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
  
      <!-- 增加-弹出层 -->
      <UserAdd ref="userAddRef" v-if="userAddShow" :userAddShow="userAddShow"
      @dialogClose="dialogClose"></UserAdd>
      <UserEdit ref="userEditRef" v-if="userEditShow" :userEditShow="userEditShow" :record="formFileds"
      @dialogClose="dialogClose"></UserEdit>
      <Password ref="userEditRef" v-if="passwordChangeShow" :passwordChangeShow="passwordChangeShow" :record="formFileds"
      @dialogClose="dialogClose"></Password>
    </div>
  </template>
      
  <script>
import UserAdd from './userAdd.vue';
import UserEdit from './userEdit.vue';
import Password from './passwordChange.vue';
  export default {
    name: "userManage",
    components: {
    UserAdd,
    UserEdit,
    Password
},
    data () {
      return {
        formFileds: {
        },
        tableData: [{
          id: 0,
          userID: '001',
          userName: '王小虎',
          role: '角色1',
          mailbox: '12345678@qq.com',
          tel: '12345111111',
        },
        {
          id: 1,
          userID: '001',
          userName: '王小虎',
          role: '账号管理员',
          mailbox: '12345678@qq.com',
          tel: '12345111111',
        },
        {
          id: 2,
          userID: '001',
          userName: '王小虎',
          role: '账号管理员',
          mailbox: '12345678@qq.com',
          tel: '12345111111',
        },],
        userAddShow : false,
        userEditShow: false,
        passwordChangeShow: false
      }
    },
    methods: {
  
      handleRowClick (row, event, column) {
  
        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone (selection) {
  
        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose () {
  
        this.userAddShow = false;
        this.userEditShow = false;
        this.passwordChangeShow = false;
      },
      passwordChange(){
        this.passwordChangeShow = true;
      },
      rowEdit (index, row) {
        //  console.log(1111)
        // this.$refs.detailRef.handleEdit('qqqq')
  
        // //当前选中行
        this.formFileds = row;
        console.log(1)
        this.userEditShow = true;
      },
      handleEdit (id) {
        this.$refs.editForm.validate(isValid => {
  
          if (!isValid) return;
  
          // 保存编辑后的数据
          Object.assign(this.tableData[id], this.formFileds);
          this.userEditShow = false;
  
          // 考虑到可能编辑了日期-需要重新排序
          // ***注意：手动排序传参和表格的default-sort属性格式不太一样
          this.$refs.list.sort('date', 'descending');
  
          this.$message.success('编辑成功');
        });
      },
      add () {
        
        this.userAddShow = true;
        console.log(this.userAddShow)
      }
    }
  }
  </script>
      
  <style scoped lang="less">
  .el-form {
    padding: 0 10px;
  }
  
  .el-date-editor {
    width: 100% !important;
  }
  </style>
      